<template>
  <div>
      <div class="bigbox">
    <!-- 头部导航 -->
    <header>
        <div class="hlef"><van-icon name="arrow-left" size="25px" color="
        gray" /></div>
        <div class="hcen">我的优惠券</div>
        <div class="hrig">
            <button class="blef"><van-icon name="ellipsis" size="14px"/></button>
            <button class="brig" ><van-icon name="aim" size="14px"/></button>
        </div>
    </header>
    <!-- 选框列表 -->
    <nav>
          <van-tabs v-model="active">
            <van-tab title="未使用" name="use" class="tips">
                <!-- 优惠券单元格 -->
                <van-coupon-cell
                :coupons="coupons"
                :chosen-coupon="chosenCoupon"
                @click="showList = true"
                />
                <!-- 优惠券列表 -->
                <van-popup
                v-model="showList"
                round
                position="bottom"
                style="height: 90%; padding-top: 4px;"
                >
                <van-coupon-list
                    :coupons="coupons"
                    :chosen-coupon="chosenCoupon"
                    :disabled-coupons="disabledCoupons"
                    @change="onChange"
                    @exchange="onExchange"
                />
                </van-popup>
            </van-tab>
            <van-tab title="使用记录" name="his">
                 <van-empty image="search" description="暂无数据" class="img"/>
            </van-tab>
            <van-tab title="已过期" name="out">
                 <van-empty image="search" description="暂无数据" class="img"/>
            </van-tab>
        </van-tabs>
    
    </nav>

</div>
  </div>
</template>

<script>
const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元',
};

export default {
  data() {
    return {
      showList:false,
      active:2,
      activeName:"use",
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
    };
  },
  methods: {
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },

  },
};

</script>

<style scoped>
.bigbox{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
}

header{
    width: 100%;
    height: 44px;
    background-color: #ee7046;
    display: flex;
    padding-left: 15px;
    padding-right: 15px;
    justify-content: flex-start;
    box-sizing: border-box;

}
.hlef{
    width:44px;
    height: 44px;
    padding-top:8px ;
    text-align: center;
}
.hrig{
     width:100px;
    height: 44px;
    padding-top:8px ;
    text-align: center;
}
.hcen{
    flex: 1;
    line-height: 44px;
    padding-left: 10px;
}
.hrig>.blef{
    width: 25px;
    height: 20px;
    border-radius: 30% 0 0 30%;
    text-align: center;
    border-right:1px solid gray;
    outline: none;

}
.hrig>.brig{
    width: 25px;
    height: 20px;
    border-radius:0 30% 30% 0;
    text-align: center;
    border-left:0 ;
    outline: none;
}
main{
    flex: 1;
    position: relative;
}



</style>